<template>
	<view class="mainpadding beijingse">
		<!-- 顶部 -->
		<view class="flexbetween">
			<view class="flexleft">
				<view class="dibiao margin_right1"></view>
				<view class="ershib">{{address}}</view>
			</view>
			<view class="sousuobox flexleft" @click="tzsousuo">
				<view class="sousuoicon margin_right2"></view>
				<input class="inputs" type="text" placeholder="请输入你要搜索的内容" :disabled="true">
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="margin_top">
			<u-swiper :list="list1"></u-swiper>
		</view>
		<!-- 所有基础功能 -->
		<view class="flexbetween flex_wrap">
			<view class="flexcenter gonengbox" @click="tzsplb(1,item.id)" v-for="item in listclass" :key="item.id">
				<view class=" margin_top ">
					<view class="gntupian">
						<image :src="item.image_text" mode=""></image>
					</view>
					<view class=" nostrongtext margin_top1 textcenter">{{item.name}}</view>
				</view>
			</view>
			<view class="gonengbox flexcenter" @click.stop="tzqd">
				<view class="margin_top ">
					<view class="gntupian">
						<image src="../../static/image/system/qiandao.png" mode=""></image>
					</view>
					<view class=" nostrongtext margin_top1 textcenter">签到</view>
				</view>
			</view>
		</view>
		<!-- 商品区 -->
		<view class="flexbetween margin_top">
			<view class="flspbox mainpadding" @click="tzsplb(2)">
				<view class=" bigtext">福利商品区</view>
				<view class="huangsetext margin_top1">专属优惠享不停</view>
			</view>
			<view class="" style="width: 47%;">
				<view class="ytstbox" @click="tzycst">
					<view class=" bigtext">云创生态</view>
					<view class="fensetext margin_top1">发现新一天</view>
				</view>
				<view class="qdbox margin_top" @click="tzqdhd">
					<view class=" bigtext">渠道好店</view>
					<view class="fensetext margin_top1">精选渠道好店</view>
				</view>
			</view>
		</view>
		<!-- 线下连锁直营店 -->
		<view class="xxzybox mainpadding margin_top" @click="tzdplb">
			<view class="flexbetween">
				<view class="cstext">线下连锁直营店</view>
				<view class="xiaobaibtn">点击进入</view>
			</view>
		</view>
		<!-- 热销好物 -->
		<view class="margin_top flexleft ">
			<view class="ggline margin_right2"></view>
			<view class="bigtext">热销好物</view>
		</view>
		<view class="flexbetween flex_wrap h5">
			<view class="shangpbox margin_top" v-for="item in list.data" :key="item.id" @click="tzspxq(item.id)">
				<view class="shangptp">
					<image :src="item.image_text" mode=""></image>
				</view>
				<view class="mainpadding ffffff baibox">
					<view class="ershil yhxiank">{{item.title}}</view>
					<view class="flexbetween margin_top5">
						<view class="jiagetext">￥{{item.price}}</view>
						<view class="goueucheicon"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				listclass: [],
				address: "",
				lat:"",
				lon:""
			}
		},
		onLoad(options) {
			let code = options.code
			uni.setStorageSync("yqm",code)
			this.getbanner()
			this.init()
			this.getclass()
			this.getlocation()
			if (options.openid) {
				let openid = options.openid
				uni.setStorageSync("openid",openid)
			}
			// #ifdef H5
			if(!uni.getStorageSync("openid") && this.isWechat()){
				this.getWeChatCode()
			}
			// #endif
		},
		methods: {
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			getWeChatCode() {
				let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
				console.log(local,'llllll');
				window.location.href = 'https://rebatemall.yuntaiqikeji.com/api/user/auth?target_url=' + local
			},
			// #ifdef APP-PLUS
				getlocation() {
					let _this = this
					console.log(666, "获取的位置信息")
					uni.getLocation({
						type: 'gcj02',
						geocode: true, //设置该参数为true可直接获取经纬度及城市信息
						success: function(res) {
							console.log(res, "获取的位置信息777")
							let dz = res.address
							_this.address = dz.city
							
							// _this.khaddress = dz.street + dz.streetNum + dz.poiName
						},
						fail(err) {
							console.log(err, "定位错误信息999")
						}
					});
				},
			//#endif
			// #ifdef H5
			getlocation() {
				let _this = this
				console.log("333")
				uni.getLocation({
					type: 'wgs84',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						console.log("222")
						_this.lat = res.latitude
						_this.lon = res.longitude
						uni.setStorageSync('lat', res.latitude);
						uni.setStorageSync('lon', res.longitude);
						const _key = "1f101eb58e81c42702624579dfceaf68"
						uni.request({
							method: 'GET',
							url: 'https://restapi.amap.com/v3/geocode/regeo',
							data: {
								key: _key,
								location: `${res.longitude},${res.latitude}`
							},
							success: ({
								data
							}) => {
								_this.address = data.regeocode.addressComponent.city
							},
							fail(err) {
								console.log(err, "惊雷惊雷")
							}
						})
					},
					fail:function (ers) {
						console.log(ers, "惊雷惊雷")
					}
				})
			},
			//#endif
			
			// 跳转店铺列表
			tzdplb() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: '/pages/homepage/dianpulb'
				})
			},
			// 获取轮播接口数据
			getbanner() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 1,
					is_more: 1
				}).then(res => {
					res.data.forEach(item => {
						this.list1.push(item.image_text)
					})
				})
			},
			// 获取分类接口数据
			getclass() {
				httpRequest.request('/api/goods/goodsCategory', 'POST', {
					isnav: 1
				}, false, false, true).then(res => {
					this.listclass = res.data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 热门推荐列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/goods/goodsList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					hot_status: 1,
					zh_status: "",
					price_status: "",
					keyword: ""
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 跳转商品详情
			tzspxq(id) {
				let obj = {
					goods_id: id
				}
				uni.navigateTo({
					url: '/pages/homepage/shangpinxq?msg=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			// 跳转渠道好店
			tzqdhd() {
				uni.navigateTo({
					url: '/pages/homepage/qudaohd'
				})
			},
			// 跳转云创生态
			tzycst() {
				uni.navigateTo({
					url: '/pages/homepage/yunchangst'
				})
			},
			// 跳转签到页面
			tzqd() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: '/pages/homepage/qiandao'
				})
			},
			// 跳转商品列表
			tzsplb(value, id) {
				let msg = {
					keywords: "",
					category_id: id, //分类id
					type: value //1,普通商品，2福利券商品
				}
				uni.navigateTo({
					url: "/pages/homepage/shangplb?msg=" + encodeURIComponent(JSON.stringify(msg))
				})
			},
			// 跳转搜索页面
			tzsousuo() {
				uni.navigateTo({
					url: '/pages/homepage/sousuo'
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	// 商品列表样式
	.shangpbox {
		width: 48%;
	}

	.jiagetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FAB536;
	}

	.baibox {
		border-radius: 0 0 11rpx 11rpx;
	}

	// .yhxiank {
	// 	overflow: hidden;
	// 	text-overflow: ellipsis;
	// 	white-space: nowrap;
	// }

	.shangptp {
		width: 338rpx;
		border-radius: 11rpx 11rpx 0 0;
		height: 338rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx 11rpx 0 0;
		}
	}
</style>
<style lang="scss" scoped>
	.xiaobaibtn {
		border: 2rpx solid #FFFFFF;
		font-size: 24rpx;
		width: 142rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 120rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.cstext {
		font-size: 29rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFEBEB;
	}

	.xxzybox {
		background-color: #FE6763;
		border-radius: 11rpx;
	}

	.qdbox {
		padding: 30rpx 0 57rpx 30rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/qdhd.png');
	}

	.ytstbox {
		padding: 30rpx 0 57rpx 30rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/ycst.png');
	}

	.fensetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ED8778;
	}

	.huangsetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FAB536;
	}

	.flspbox {
		width: 45.5%;
		padding: 30rpx 0 258rpx 30rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/flspq.png');

	}

	.gonengbox {
		width: 25%;
	}

	.gntupian {
		margin: auto;
		width: 90rpx;
		height: 90rpx;

		image {
			margin: auto;
			width: 100%;
			height: 100%;
		}
	}

	.inputs {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #C5C5C5;
	}

	.sousuobox {
		width: 60%;
		background: #F3F3F3;
		padding: 20rpx 40rpx;
		border-radius: 60rpx;
		// box-sizing: border-box;
	}

	.ershib {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.dibiao {
		width: 22rpx;
		height: 29rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/dibiao.png');
	}
	/* #ifdef H5 */
	.h5{
		padding-bottom: 180rpx;
	}
	/* #endif */
</style>
